<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
    <title>壹脉智能CRM</title>
    <!-- Bootstrap Core CSS -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/style.min.css" rel="stylesheet">
    <link href="./css/colors/default.css" id="theme" rel="stylesheet">
    <link rel="stylesheet" href="./css/diy.min.css">
    <style>
        .companyLogo{
            background-size: cover;
        }
        .card-page-header{
            height: 80px;
            line-height: 80px;
            border-bottom: 1px solid #f1f2f3;
            font-size:14px;
            color:rgba(103,117,124,1);
            display: flex;
            justify-content: space-between;
            padding-right: 100px;
        }
        .card-page-header span{
            font-size:14px;
            font-weight:400;
            color:rgba(81,205,203,1);
        }
        .back_btn{
            position: absolute;
            border-radius: 4px;
            background: #51CDCB;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            color: #fff;
            padding: 0 15px;
            cursor: pointer;
            top: 40px;
            right: 30px;
            z-index: 999;
        }
    </style>

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
<div class="preloader">
    <div class="loader">
        <div class="loader__figure"></div>
        <p class="loader__label">壹脉</p>
    </div>
</div>
<div id="main-wrapper">
    <header class="topbar">
        <nav class="navbar top-navbar navbar-expand-md navbar-light">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">
                    <b>
                        <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
                        <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
                    </b>
                    <span>
                        <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
                    </span>
                </a>
            </div>
            <div class="navbar-collapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                    <li class="nav-item"> <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
                </ul>
                <user-head></user-head>

            </div>
        </nav>
    </header>
    <aside class="left-sidebar">
        <div class="scroll-sidebar">
            <company-position></company-position>
            <nav class="sidebar-nav p-0">
                <c-slider current="8"></c-slider>
            </nav>
        </div>
    </aside>
    <div class="page-wrapper">

        <div class="container-fluid">

            <div class="row page-titles">
                <div class="col-md-5 align-self-center">
                    <h3 class="text-themecolor">{{type | codeToStr}}</h3>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
                        <li class="breadcrumb-item">
                            <a href="/main/adList.html">广告图管理</a>
                        </li>
                        <li class="breadcrumb-item active">{{type | codeToStr}}</li>
                    </ol>
                </div>
            </div>

            <div class="bgfff p-t-15 p-l-30 p-r-30 posre p-b-30">
                <div class="disflex p-t-15 p-b-15">
                    <div class="w100 c38">顶部图片</div>
                    <div class="">
                        上传图片的最佳尺寸：750像素*422像素，其他尺寸会影响页面效果，格式png，jpeg，jpg。大小不超过2M，最少上传1张，最多可上传6张
                    </div>
                </div>
                <div class="disflex wrap">
                    <div class="goods-img w100 h100 m-r-5 m-b-5 bradius4 position-relative"
                         v-for="(img,key) in photos"
                         :style="'background-image: url('+img+')'">
                        <img @click.stop="delPic(key)"
                             class="del-goods-pic w20"
                             src="https://you-one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crmpc/2f2fbcd8d2b2177e884423142be14ac.png">
                    </div>
                    <label v-if="photos.length<6" class="w100 h100 bradius4 textc bced m-r-20 position-relative ohidden icon-plus bradius4">
                        <input type="file" class="hide" ref="file" @change="uploadImg">
                    </label>
                </div>
                <div class="d-flex m-t-15">
                    <span class="w85 textc btn-success cfff bradius4 curpointer lh40" :class="{disabled: loading}" @click="save">保存</span>
                </div>

            </div>
        </div>

    </div>
</div>
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="./js/jquery.min.js"></script>

<script src="./js/bootstrap.min.js"></script>
<script src="./js/perfect-scrollbar.jquery.min.js"></script>
<script src="./js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="./js/custom.min.js"></script>
<script src="./js/layer/layer.js"></script>
<!-- ============================================================== -->

<script src="./js/vue.js"></script>
<script src="./js/config.js"></script><script src="./js/extend.js"></script>
<script>
    $(function () {
        var vw = new Vue({
            el: '#main-wrapper',
            data: {
                type: '',
                photos: [],
                loading: false,
            },
            mounted() {
                this.type= $.formatParams(location.href).type || '';
                this.getCompanyPhoto();
            },
            methods:{
                delPic(idx){
                    this.photos.splice(idx, 1)
                },
                uploadImg(e){
                    let fileElem = e.target;
                    let file = fileElem.files[0];
                    let formData = new FormData();

                    if (this.photos.length > 5){
                        layer.alert('最多设置6张图片');
                        return;
                    }

                    formData.append('file', file);
                    $.uploadFile(formData).then(res=>{
                        let url = $.baseFileUrl+'/'+res.data + '.primary.png';
                        this.photos.push(url);
                        fileElem.value = '';
                    })
                },
                save(){
                    $.cAjax('/crmPc/companyPhoto/insertCompanyPhoto', {
                        data:{
                            type: this.type,
                            photoList: this.photos,
                        }
                    }).then(res=>{
                        layer.alert('设置成功', ()=>{
                            history.back();
                        })
                    }).catch(err => {

                    })
                },
                getCompanyPhoto(){
                    $.cAjax('/crmPc/companyPhoto/selectCompanyPhoto', {
                        data:{
                            type: this.type,
                        }
                    }).then(res=>{
                        this.photos = res.map(val=>val.photo) || [];
                    }).catch(err => {
                        this.photos = [];
                    })
                }
            },
            filters:{
                codeToStr(str){
                    let obj = {
                        1: '商城板块',
                        2: '预约板块',
                        3: '动态板块',
                    };

                    return obj[str];
                },
            }
        })
    })
</script>
</body>
</html>












